<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="interval">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Polar Interval Plot</title>
</head>

<body>
  <div id="canvas"></div>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    const data = [
        { country: '中国', cost: 96 },
        { country: '德国', cost: 121 },
        { country: '美国', cost: 100 },
        { country: '日本', cost: 111 },
        { country: '韩国', cost: 102 },
        { country: '法国', cost: 124 },
        { country: '意大利', cost: 123 },
        { country: '荷兰', cost: 111 },
        { country: '比利时', cost: 123 },
        { country: '英国', cost: 109 },
        { country: '加拿大', cost: 115 },
        { country: '俄罗斯', cost: 99 },
        { country: '墨西哥', cost: 91 },
        { country: '印度', cost: 87 },
        { country: '瑞士', cost: 125 },
        { country: '澳大利亚', cost: 130 },
        { country: '西班牙', cost: 109 },
        { country: '巴西', cost: 123 },
        { country: '泰国', cost: 91 },
        { country: '印尼', cost: 83 },
        { country: '波兰', cost: 101 },
        { country: '瑞典', cost: 116 },
        { country: '奥地利', cost: 111 },
        { country: '捷克', cost: 107 }
    ];
    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight
    });
    chart.source(data);
    chart.scale({
      cost: {
        min: 0
      }
    });
    chart.coord('polar', {
      radius: 0.8
    });
    chart.legend({
      position: 'bottom',
      itemWidth: 55, // 使得图例对齐
      offset: 20
    });
    chart.axis('cost', {
      label: null
    });

    chart.axis('country', {
      grid: {
        align: 'center'
      },
      label: {
        offset: 10,
        textStyle: {
          textAlign: 'center', // 设置坐标轴 label 的文本对齐方向
          fontSize: 11
        }
      }
    });
    chart.interval().position('country*cost')
        .color('country', [ 'rgb(252,143,72)', 'rgb(255,215,135)' ])
        .label('cost', {
          offset: -15,
          textStyle(val) {
            if (val * 1 === 130) {
              return {
                textAlign: 'center',
                fontSize: 14,
                fill: 'red'
              };
            }

            return {
              textAlign: 'center',
              fill: '#fff',
              fontSize: 12
            };
          }
        })
        .style({
          lineWidth: 1,
          stroke: '#fff'
        });
    chart.render();
  </script>
</body>

</html>
